<template>
  <div>
    <loading v-if="!upcommingList.length"></loading>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="upPullLoading"
        :finished="upPullFinished"
        finished-text="加载完成"
        @load="onLoad"
        offset="200"
      >
        <lazy-component
          ><film-list
            :list="upcommingList"
            :type="type"
          ></film-list></lazy-component
      ></van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import FilmList from "@/components/FilmList";
import Loading from "@/components/Loading";
export default {
  data() {
    return {
      //    upcommingList 用于存储即将播放电影的列表
      upcommingList: [],
      //    type为 0 则表示为即将上映的电影列表页面
      type: 0,
      isLoading: false,
      // 上拉加载状态
      upPullLoading: false,
      // 上拉完成状态
      upPullFinished: false,
      // 触底距离
    };
  },
  // 在即将上映页面注册播放组件
  components: {
    FilmList,
    Loading,
  },
  async created() {
    // console.log(this.upcommingList);
    let upList = JSON.parse(sessionStorage.getItem("upList"));
    this.upcommingList = upList ? upList : [];
    this.getList();
  },
  methods: {
    onRefresh() {
      // 模拟刷新的过程
      // let timerId = setTimeout(() => {
      //   this.isLoading = false;
      //   clearTimeout(timerId);
      // }, 2000);
      this.upcommingList = [];
      this.getList();
    },
    onLoad() {
      this.upPullLoading = true;
      this.getList();
      this.upPullLoading = false;
      console.log("触底了");
    },
    // 获取即将上映的列表
    async getList() {
      let res = await this.$axios("seatSell/upComming");
      let movList = res.data.data.films;
      this.upcommingList = [...this.upcommingList, ...movList];
      sessionStorage.setItem("upList", JSON.stringify(this.upcommingList));
    },
  },
};
</script>

<style>
</style>